<template>
  <div>
    <Sticky :stickyArticle="stickyArticle" v-if="stickyArticle" />
    <Recommend
      :recommendArticle="recommendArticle"
      v-if="recommendArticle.length !== 0"
    />
    <ArticleTitle>
      <template #title>文章列表</template>
      <template #icon>
        <svg class="icon wenzhang" aria-hidden="true">
          <use xlink:href="#icon-wenzhang-copy"></use>
        </svg>
      </template>
    </ArticleTitle>
    <ArticleMain />
  </div>
</template>

<script setup>
  import Sticky from './childComponents/Sticky.vue'
  import Recommend from './childComponents/Recommend.vue'
  import ArticleTitle from '@/components/ArticleTitle.vue'
  import ArticleMain from './childComponents/ArticleMain.vue'
  import { onBeforeMount, ref } from 'vue'
  import {
    queryStickyArticleRequest,
    queryRecommendRequest,
  } from '@/network/api/home'

  let stickyArticle = ref()
  let recommendArticle = ref([])
  onBeforeMount(async () => {
    const sticky = await queryStickyArticleRequest()
    stickyArticle.value = sticky.result[0]
    const recommend = await queryRecommendRequest()
    recommendArticle.value = recommend.result
  })
</script>

<style scoped></style>
